<template>
   <el-dialog
    :close-on-click-modal="false"
    :title="titleMaps[dialogStatus]"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="700px"
  >
     <el-form
      :rules="rules"
      ref="ruleForm"
      :model="formData"
      label-width="80px"
      size="small"
      class="form-box"
    >    
        <el-row >
            <el-col :span="8">
                <el-form-item label="用户名" prop="userName">
                    <el-input v-model="formData.userName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="姓名" prop="realName">
                    <el-input v-model="formData.realName"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="formData.sex" >
                        <el-option label="女" :value="1"></el-option>
                        <el-option label="男" :value="2"></el-option>                       
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="角色" prop="roleId">
                    <el-select v-model="formData.roleId"  :disabled=" dialogStatus == 1">
                        <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>                   
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formData.mobile"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="开通状态" prop="state">
                            <el-select v-model="formData.state" placeholder="请选择" @change="select">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form> 
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
      <el-button @click="submitForm('ruleForm')" type="primary" size="small" :loading="isLogin">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getRoleList,submitForm } from "@/api/systemSettings/userManagement";
export default {
  components: {},
  props:['dialogVisible','formData','dialogStatus'],
  data() {
    var validatePhoneNumber = (rule, value, callback) => {
            var reg = /^0?1[3|4|5|8][0-9]\d{8}$/;
            if(!reg.test(value) || value.length!=11){
                callback(new Error('手机号码格式错误'));
            }else{
                callback();
            }
        };
    return {
        options: [
            {
            value: 0,
            label: '暂不开通'
            }, 
            {
            value: 1,
            label: '开通'
            }],
           roleList:[],
           isLogin:false,
            // 标题
            titleMaps:['新增',"编辑"],
             rules:{
                mobile: [{required: true, message: '请输入手机号', trigger: 'blur'}],
                userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                sex: [{required: true,message: "请选择性别",trigger: "change"}],
                roleId: [{required: true,message: "请选择角色",trigger: "change"}],
                state: [{required: true,message: "请选择是否开通坐席",trigger: "change"}],
                email:[ { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
            }
    };
  },
  computed: {},
  created() {
     this.getRoleList();
  },
  mounted() {

  },
  watch: {
      
  },
  methods: {
    handleClose(){
         this.$emit('closeDialog')
     },
     //获取角色列表
     getRoleList(){
        getRoleList()
                .then((res) => {
                  if(res.code=='200'){
                      this.roleList=res.data;
                  }            
            })
            .catch(() => {
                console.log('error submit!!');
                return false;
            });
      },
     //保存
     submitForm(formName) {
        console.log(this.formData,'保存的信息')
       var _this=this;
       let url= this.dialogStatus ==1 ? '/manage/updateUserInfo' : '/manage/addAdminUser';
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isLogin = true;
          submitForm(url, this.formData)
                .then((res) => {
                    if(res.code!=200){
                        setTimeout(() =>{
                            this.isLogin = false;                          
                            this.$message.error(`${res.message}`);
                        }, 0.1 * 1000 ); 
                    }else{
                       setTimeout(() =>{
                            this.isLogin = false;
                            this.$message.success(`${res.message}`);
                            this.handleClose();
                            this.$emit('updateData');
                        }, 0.1 * 1000 ); 
                    }              
              })
              .catch(() => {
                this.isLogin = false;
              });
        }
      });
    }
  }
};
</script>

<style></style>
<style lang="scss" scoped>

</style>
